<template>
	<canvas v-show="show"  class="fire-canvas" :style="{width: '100vw', height:'100vh', 'z-index':zIndex}"
		:canvas-id="canvasId" @error="canvasIdErrorCallback" ></canvas>
</template>

<script>
	/*
    浏览器的最高刷新赔率（最后一个表示1秒刷新60次）
*/
	const minBrowserRefreshTime = window && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
		.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame) || function(t) {
		setTimeout(t, 1e3 / 30)
	}

	let fireCanvasBox = null
	export default {
		props: {
			/*
			    礼花数量（最好小于500,太多会卡顿）
			*/
			particleCount: {
				type: [Number, String],
				default: 100
			},
			/* 取值	0-360
			    喷发角度示意图（简单说就是喷射方向）
			            礼花（90）
			    礼花（180）		礼花0
			            礼花（270）
			*/
			angle: {
				type: [Number, String],
				default: 90
			},
			/*
			    爆炸范围
			*/
			spread: {
				type: [Number, String],
				default: 70
			},
			/*
			    喷发的初始速度
			*/
			startVelocity: {
				type: [Number, String],
				default: 95
			},
			/*
			    喷发的衰退时间，超出canvas会被清除，跟startVelocity配合使用
			*/
			decay: {
				type: [Number, String],
				default: 0.9
			},
			/*
			    刷新几次消失（其实是透明度为0），这个跟间隔的刷新频率有关
			*/
			ticks: {
				type: [Number, String],
				default: 400
			},
			/*
			    礼花层级
			*/
			zIndex: {
				type: [Number, String],
				default: 9999999  
			},
			/*
			    所有要随机的礼花颜色预选值
			*/
			colors: {
				type: Array,
				default: () => ['#5BC0EB', '#2176AE', '#FDE74C', '#9BC53D', '#E55934', '#FA7921', '#FF4242']
			},
			canvasId: {
				type: String,
				default: 'fireCanvas'
			},



		},
		data() {
			return {
				/*
				    手机分辨率
				*/
			 width:0,
			 height:0,
			 x:0,
			 y:0,
			  systenInfo:{},
				pixelRatio: {},
				show: false
			}
		},
		mounted() {
			setTimeout(()=>{
				this.systenInfo = uni.getSystemInfoSync()
			 this.width=this.systenInfo.windowWidth
			 this.height=this.systenInfo.windowHeight
			 this.pixelRatio=this.systenInfo.pixelRatio
			 this.x=this.systenInfo.windowHeight / 2 + 145
			 this.y=this.systenInfo.windowWidth * .7
			

				this.initCanvas()
			},1500)
	    
			
			
	
			

		},
		destroyed() {
			fireCanvasBox = null
		},
		methods: {
			/*
			    转16进制（颜色用）
			*/
			parseInt16(t) {
				return parseInt(t, 16)
			},
			canvasIdErrorCallback(e) {
				console.error('出错', e.detail.errMsg)
			},
			initCanvas() {
				fireCanvasBox = null
				fireCanvasBox = uni.createCanvasContext(this.canvasId, this)
				fireCanvasBox.fillRect(0, 0, this.width * this.pixelRatio, this.height * this.pixelRatio)
				
				fireCanvasBox.setFillStyle('rgba(0,0,0,0)')
			
				fireCanvasBox.scale(this.pixelRatio, this.pixelRatio)
				
				fireCanvasBox.draw()
				
				this.fireworksDraw()
				
				

			},
			fireworksDraw() {
				
				let ribbon = [];
				let // 彩带容器
					particleCount = this.particleCount;
				let n = null;
				let r = null;
				let a = null;
				let i = null
				for (; particleCount--;) {
					n = {
							x: this.x,
							y: this.y,
							angle: this.angle,
							spread: this.spread,
							startVelocity: this.startVelocity,
							color: this.colors[particleCount % this.colors.length],
							ticks: this.ticks,
							decay: this.decay
						},
						i = 0,
						r = n.angle * (Math.PI / 180),
						a = n.spread * (Math.PI / 180)

					ribbon.push({ // 菜单位置初始化
						x: n.x,
						y: n.y,
						depth: 0.5 * Math.random() + 0.6,
						wobble: 10 * Math.random(),
						velocity: 0.5 * n.startVelocity + Math.random() * n.startVelocity,
						angle2D: -r + (0.5 * a - Math.random() * a),
						tiltAngle: Math.random() * Math.PI,
						color: (i = (n.color + '').replace(/[^0-9a-f]/gi, ''), i.length < 6 && (i = i[0] + i[0] +
							i[1] + i[1] + i[2] + i[2]), { // 生成随机颜色
							r: this.parseInt16(i.substring(0, 2)),
							g: this.parseInt16(i.substring(2, 4)),
							b: this.parseInt16(i.substring(4, 6))
						}),
						tick: 0,
						totalTicks: n.ticks,
						decay: n.decay,
						random: Math.random() + 5,
						tiltSin: 0,
						tiltCos: 0,
						wobbleX: 0,
						wobbleY: 0
					})
				}
				let that = this
				
				minBrowserRefreshTime(function drawRibbon() {
					if (!fireCanvasBox) return
					fireCanvasBox.draw()
					fireCanvasBox.restore(),
						ribbon = ribbon.filter((e, index) => {
							// if(index=10) console.log(e.y)
							e.x += Math.cos(e.angle2D) * e.velocity,
								e.y += Math.sin(e.angle2D) * e.velocity + 5 * e.depth,
								e.wobble += 0.1,
								e.velocity *= e.decay,
								e.tiltAngle += 0.02 * Math.random() + 0.12,
								e.tiltSin = Math.sin(e.tiltAngle),
								e.tiltCos = Math.cos(e.tiltAngle),
								e.random = Math.random() + 4,
								e.wobbleX = e.x + 10 * Math.cos(e.wobble) * e.depth,
								e.wobbleY = e.y + 10 * Math.sin(e.wobble) * e.depth

							if (!that.show) {
								setTimeout(() => {
									that.show = true
								}, 280)
							}
							// 开始画图
							fireCanvasBox.fillStyle = 'rgba(' + e.color.r + ', ' + e.color.g + ', ' + e.color
								.b + ', ' + 1 + ')',
								// (1 - (e.tick++) / e.totalTicks)
								fireCanvasBox.beginPath(),
								fireCanvasBox.moveTo(Math.floor(e.x), Math.floor(e.y)),
								fireCanvasBox.lineTo(Math.floor(e.wobbleX), Math.floor(e.y + e.random * e
									.tiltSin)),
								fireCanvasBox.lineTo(Math.floor(e.wobbleX + e.random * e.tiltCos), Math.floor(e
									.wobbleY + e.random * e.tiltSin)),
								fireCanvasBox.lineTo(Math.floor(e.x + e.random * e.tiltCos), Math.floor(e
									.wobbleY)),
								fireCanvasBox.closePath(),
								fireCanvasBox.fill()
							return e.y < that.systenInfo.windowHeight * 2 && e.x > -10&&e.x<that.systenInfo.windowWidth
						})
					ribbon.length ? minBrowserRefreshTime(drawRibbon) : fireCanvasBox = null // 轮询调用或者释放掉
					if(!ribbon.length) setTimeout(()=>{
						that.initCanvas();
					},2000)
				})
			}
		}
	}
</script>

<style>
	.fire-canvas {
		position: fixed;
		top: 0px;
		left: 0px;

		pointer-events: none;
	}
</style>
